<template>
  <div class="Detail">
    <div class="detail_title">流水详情</div>
    <div class="basic_info_water">
      <div class="basicInfo_title">基础信息</div>
      <div class="basic_Info_item">
        <el-row>
          <el-col :span="8">
            <div class="item_list1">
              <div>支付单号:{{ WaterDetail.payNo }}</div>
              <div>消费客户:{{ WaterDetail.custName }}</div>
              <div>账单金额:￥{{ WaterDetail.payWant }}</div>
              <div>实收金额:￥{{ WaterDetail.payReal }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item_list2">
              <div>关联订单:{{ WaterDetail.orderNo }}</div>
              <div>支付类型:{{ WaterDetail.orderTypeStr }}</div>
              <div>优惠金额:￥{{ WaterDetail.payPre }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item_list3">
              <div>消费门店:{{ WaterDetail.storeName }}</div>
              <div>支付时间:{{ WaterDetail.createTime }}</div>
              <!-- <div>抵扣金额:￥{{ WaterDetail.moneyCard }}</div> -->
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 支付信息 -->
      <div class="pay_list_table">
        <div class="pay_title">支付信息</div>
        <div class="table_list">
          <el-table :data="payTypeList" stripe style="width: 100%">
            <!-- <el-table-column
              prop="payNo"
              label="关联单号"
              width="200"
            ></el-table-column> -->
            <el-table-column
              prop="payTypeName"
              label="支付方式"
              width="200"
            ></el-table-column>
            <el-table-column prop="payMoney" label="支付金额"></el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 卷码信息 -->
      <div class="pay_list_table">
        <div class="pay_title">卷码信息</div>
        <div class="table_list">
          <el-table :data="orderMinorCards" stripe style="width: 100%">
            <el-table-column
              prop="minorCardName"
              label="渠道类型"
            ></el-table-column>
            <el-table-column prop="itemName" label="项目"></el-table-column>
            <el-table-column
              prop="minorCardMoney"
              label="实收金额"
            ></el-table-column>
            <el-table-column
              prop="minorCardNo"
              label="优惠券码"
            ></el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 项目信息 -->
      <div class="project_list_table">
        <div class="project_title">项目信息</div>
        <div class="project_table_list">
          <el-table :data="serverList" stripe style="width: 100%">
            <el-table-column prop="roomName" label="消费房间"></el-table-column>
            <el-table-column prop="contentType" label="消费类型">
              <template slot-scope="scope">
                <div>
                  {{ contentType[scope.row.contentType] }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="contentName"
              label="消费内容"
            ></el-table-column>
            <el-table-column prop="serverPrice" label="单价"></el-table-column>
            <el-table-column prop="serverCount" label="数量"></el-table-column>
            <!-- <el-table-column prop="prePrice" label="优惠信息"></el-table-column> -->
            <el-table-column
              prop="serverPriceSum"
              label="小计"
              width="400"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { WaterDetail } from "@/api/business/order";
export default {
  name: "EryuoaStoreFrontendWaterDetail",

  data() {
    return {
      PayData: [],
      ProjectData: [],
      WaterDetail: {},
      PayInfo: [],
      payTypeList: [],
      serverList: [],
      orderMinorCards: [],

      contentType: {
        I: "项目",
        P: "商品",
      },
    };
  },

  created() {
    let payId = this.$route.query.payId;
    this.getList(payId);
  },

  mounted() {},

  methods: {
    getList(payId) {
      this.loading = true;
      WaterDetail({ payId: payId })
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.WaterDetail = data;
            this.payTypeList = data.payTypeList;
            this.serverList = data.serverList;
            this.orderMinorCards = data.orderMinorCards;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.Detail {
  background-color: #fff;
  margin: 24px;
  .detail_title {
    font-size: 20px;
    font-weight: bolder;
    padding: 24px;
  }
  .basic_info_water {
    .basicInfo_title {
      padding-left: 24px;
      font-size: 15px;
      font-weight: bolder;
    }

    .basic_Info_item {
      padding-left: 24px;
      padding-top: 20px;
      .item_list1 {
        div {
          margin-bottom: 10px;
        }
      }
      .item_list2 {
        div {
          margin-bottom: 10px;
        }
      }
      .item_list3 {
        div {
          margin-bottom: 10px;
        }
      }
    }

    .pay_list_table {
      .pay_title {
        padding-left: 24px;
        font-size: 15px;
        font-weight: bolder;
        margin-top: 10px;
      }
      .table_list {
        margin: 15px 24px;
      }
    }

    .project_list_table {
      margin-top: 40px;
      padding-bottom: 30px;
      .project_title {
        padding-left: 24px;
        font-size: 15px;
        font-weight: bolder;
        margin-top: 10px;
      }
      .project_table_list {
        margin: 15px 24px;
      }
    }
  }
}
</style>